<div>

    <button style="margin: 50px;" (click)="output()">output</button>
    <button style="margin: 50px;" (click)="create()">create</button>
    <button style="margin: 50px;" (click)="createnew()">create</button>
    <button style="margin: 50px;" (click)="delete()">delete</button>
</div>
<svg dDroppable [dropScope]="'default-css'" (dropEvent)="onDrop($event)" id="designer" width="100%" height="100%" fill="red" (mousemove)="designermousemove($event)" (mouseup)="designermouseup($event)" (mousedown)="designermousedown($event)" (dblclick)="dbclick($event)">
    <defs>
        <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6"
            refY="6" orient="auto" fill="#F00">
            <path d="M-8,2 L7,6 L-8,10 L-4,6 L-8,2" fill="#00F" />

        </marker>

    </defs>
    <foreignObject x="320" y="200" width="160" height="160">

        <body>
            <div>
                <!-- <input type="text" [(ngModel)]="item.text"> -->


            </div>
        </body>
    </foreignObject>

    <line id="hline" x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255, 150, 0);stroke-width:8"></line>
    <line id="vline" x1="0" y1="0" x2="0" y2="100%" style="stroke:rgb(255,150,0);stroke-width:8">
    </line>

    <!-- <circle *ngIf="activelinkpoint.active" [attr.cx]="activelinkpoint.x" [attr.cy]="activelinkpoint.y" [attr.r]="10"
        (mousedown)="activelinkpointdown($event)" (mousemove)="activelinkpointmove($event)"
        (mouseup)="activelinkpointdown($event)" style="cursor:move;"></circle> -->

    <svg [attr.id]="item.id" *ngFor="let item of diagramData.nodes" [attr.x]="item.left" [attr.y]="item.top"
        [attr.width]="item.width" [attr.height]="item.height">
        <rect *ngIf="item.shape==='rectangle'" [attr.id]="'shape_'+item.id" x="5" y="5" [attr.width]="item.width-10"
            [attr.height]="item.height-10" [attr.fill]="item.fill" (click)="active($event)"
            (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (mousemove)="mousemove($event)"
            (mouseleave)="mouseleave($event)" />
        <ellipse *ngIf="item.shape==='ellipse'" [attr.id]="'shape_'+item.id" cx="5" cy="5" [attr.rx]="item.width/2-10"
            [attr.ry]="item.height/2-10" [attr.fill]="item.fill" (click)="active($event)"
            (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (mousemove)="mousemove($event)"
            (mouseleave)="mouseleave($event)" />
        <!-- <polygon [attr.points]="" [attr.id]="'shape_'+item.id" x="5" y="5" [attr.width]="item.width-10"
            [attr.height]="item.height-10" [attr.fill]="item.fill" (click)="active($event)"
            (mousedown)="mousedown($event)" (mouseup)="mouseup($event)" (mousemove)="mousemove($event)"
            (mouseleave)="mouseleave($event)" />
        <polygon [attr.id]="'shape_'+item.id" x="5" y="5" [attr.width]="item.width-10" [attr.height]="item.height-10"
            [attr.fill]="item.fill" (click)="active($event)" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)"
            (mousemove)="mousemove($event)" (mouseleave)="mouseleave($event)" />
        <polygon [attr.id]="'shape_'+item.id" x="5" y="5" [attr.width]="item.width-10" [attr.height]="item.height-10"
            [attr.fill]="item.fill" (click)="active($event)" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)"
            (mousemove)="mousemove($event)" (mouseleave)="mouseleave($event)" />
        <polygon [attr.id]="'shape_'+item.id" x="5" y="5" [attr.width]="item.width-10" [attr.height]="item.height-10"
            [attr.fill]="item.fill" (click)="active($event)" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)"
            (mousemove)="mousemove($event)" (mouseleave)="mouseleave($event)" />
        <polygon [attr.id]="'shape_'+item.id" x="5" y="5" [attr.width]="item.width-10" [attr.height]="item.height-10"
            [attr.fill]="item.fill" (click)="active($event)" (mousedown)="mousedown($event)" (mouseup)="mouseup($event)"
            (mousemove)="mousemove($event)" (mouseleave)="mouseleave($event)" /> -->



        <circle *ngIf="item.active" [attr.id]="'llink_'+item.id" [attr.cx]="5" [attr.cy]="item.height/2-5" [attr.r]="5"
            (mousedown)="linkmousedown($event,'l')" (mouseup)="linkmouseup($event,'l')"></circle>
        <circle *ngIf="item.active" [attr.id]="'tlink_'+item.id" [attr.cx]="item.width/2-5" [attr.cy]="5" [attr.r]="5"
            (mousedown)="linkmousedown($event,'t')" (mouseup)="linkmouseup($event,'t')">
        </circle>
        <circle *ngIf="item.active" [attr.id]="'rlink_'+item.id" [attr.cx]="item.width-5" [attr.cy]="item.height/2-5"
            [attr.r]="5" (mousedown)="linkmousedown($event,'r')" (mouseup)="linkmouseup($event,'r')"></circle>
        <circle *ngIf="item.active" [attr.id]="'blink_'+item.id" [attr.cx]="item.width/2-5" [attr.cy]="item.height-5"
            [attr.r]="5" (mousedown)="linkmousedown($event,'b')" (mouseup)="linkmouseup($event,'b')"></circle>

        <rect *ngIf="item.active" [attr.id]="'ltscale_'+item.id" [attr.x]="0" [attr.y]="0" [attr.width]="7"
            [attr.height]="7" (mousedown)="scalemousedown($event,'lt')" (mouseup)="ltscalemouseup($event)"
            style="cursor: nw-resize;">
        </rect>
        <rect *ngIf="item.active" [attr.id]="'rtscale_'+item.id" [attr.x]="item.width-7" [attr.y]="0" [attr.width]="7"
            [attr.height]="7" style="cursor: ne-resize;" (mousedown)="scalemousedown($event,'rt')"
            (mouseup)="ltscalemouseup($event)">
        </rect>
        <rect *ngIf="item.active" [attr.id]="'lbscale_'+item.id" [attr.x]="0" [attr.y]="item.height-7" [attr.width]="7"
            [attr.height]="7" style="cursor: ne-resize;" (mousedown)="scalemousedown($event,'lb')"
            (mouseup)="ltscalemouseup($event)">
        </rect>
        <rect *ngIf="item.active" [attr.id]="'rbscale_'+item.id" [attr.x]="item.width-7" [attr.y]="item.height-7"
            [attr.width]="7" [attr.height]="7" style="cursor: nw-resize;" (mousedown)="scalemousedown($event,'rb')"
            (mouseup)="ltscalemouseup($event)">
        </rect>

        <text [attr.x]="20" [attr.y]="20" [attr.width]="item.width" [attr.height]="item.height" class="cssEmployeeName"
            dominant-baseline="middle">{{item.text}}</text>

    </svg>

<line *ngFor="let l of diagramData.links" [attr.id]="l.id" [attr.x1]="l.startX" [attr.y1]="l.startY" [attr.x2]="l.endX" [attr.y2]="l.endY" style="stroke:rgb(0,150,0);stroke-width:5" marker-end="url(#arrow)" [attr.sourceid]="l.sourceid" [attr.sourcetype]="l.sourcetype"
    [attr.targetid]="l.targetid" [attr.targettype]="l.targettype" [attr.pointer-events]="l.eventactive" (click)="linkclick($event)"></line>
</svg>